<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"  
    xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html"/>

<h:head>
<link rel="stylesheet" href="#{request.contextPath}/themes/ui-lightness/skin.css" />
<title>CiberApps!</title>

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
<link rel="stylesheet" href="css/demo.css" />

<link rel="stylesheet" href="css/estilos.css" />
</h:head>
<h:body>
<div class="container_24">

<div class="grid_4">
  <div class="grid_4 omega alpha span_bottom">
    <img src="img/logoCiber.jpg" class="grid_4 omega alpha" style="border:1px solid rgba(0,0,0,0.2);margin:-1px;"/>
  </div>
  
  <div class="grid_4 omega alpha">
 	<h:form>  
                  
    <p:growl id="growl" />  
	<p:panel id="pnl" header="Busqueda" style="margin-bottom:10px;">  
            <p:inputText id="surname" value="#{pprBean.surname}" required="true" style="width:132px; margin:0px 0px 0px -11px"/>    
        <p:commandButton id="saveBtn" value="Buscar" icon="ui-icon-search"   
                    style="margin:3px 0px 0px 50px" actionListener="#{pprBean.savePerson}" update="growl"/>  
    </p:panel>  
    </h:form>
  </div>
  
  
  <div class="grid_4 span_bottom omega alpha">
  <h:form width="150"> 
  	<p:growl id="messages"/>  
    <p:menu style="width:142px">
    	 <p:menuitem value="Mis Aplicaciones" actionListener="#{buttonBean.save}" icon="ui-icon-heart"/>
         <p:menuitem value="Mas Populares" actionListener="#{buttonBean.save}" icon="ui-icon-star"/>  
         <p:menuitem value="Del Momento" actionListener="#{buttonBean.update}"  icon="ui-icon-suitcase"/>
         <p:menuitem value="Colecciones" actionListener="#{buttonBean.update}"  icon="ui-icon-link"/>  
    </p:menu>  
  </h:form>
  </div>
  
  <p:separator id="customSeparator" style="width:150px;height:4px;" /> 
  
  <div class="grid_4 omega alpha span_bottom">
	   <h:form width="150"> 
  	<p:growl id="messages"/>  
    <p:menu style="width:142px">  
        <p:submenu label="EDUCACIÓN">  
            <p:menuitem value="Familia" actionListener="#{buttonBean.save}"/>  
            <p:menuitem value="Recursos Academicos" actionListener="#{buttonBean.update}"/>  
        </p:submenu>  
        <p:submenu label="JUEGOS">  
            <p:menuitem value="Arcade" actionListener="#{buttonBean.delete}" /> 
            <p:menuitem value="Deporte" actionListener="#{buttonBean.delete}" />
            <p:menuitem value="De mesa" actionListener="#{buttonBean.delete}" /> 
        </p:submenu>  
        <p:submenu label="HERRAMIENTAS PARA EMPRESAS">  
            <p:menuitem value="Contabilidad"  />  
            <p:menuitem value="Finanzas" />  
        </p:submenu>  
        <p:submenu label="UTILIDADES">  
            <p:menuitem value="Block de Notas"  />  
            <p:menuitem value="Calculadoras" />  
        </p:submenu>  
        <p:submenu label="EXTENSIONES">  
            <p:menuitem value="Blog" />  
            <p:menuitem value="Compras"/>  
        </p:submenu>  
    </p:menu>  
  </h:form>
  
  </div>
  
  
  
</div>
  

  
  
  
  
  
  
<div class="grid_20">  
  
  <div class="grid_20 span_bottom omega alpha">
    <h:form>  
	  <p:toolbar>  
	    <p:toolbarGroup align="left">  
	        <p:commandButton type="button" value="Subir una aplicación" icon="ui-icon ui-icon-arrowthickstop-1-n" />  
	  
	        <p:commandButton type="button" value="Mis Aplicaciones" icon="ui-icon-folder-open"/>  
	  
	        <p:separator />  
	  			Bienvenido : Edgar Medina Vargas
	  		 <p:separator />
	  		 	DESARROLLADOR
<!-- 	        <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>   -->
<!-- 	        <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>   -->
<!-- 	        <p:commandButton type="button" title="Print" icon="ui-icon-print"/>   -->
	    </p:toolbarGroup>  
	  
	    <p:toolbarGroup align="right">  
	        <p:menuButton value="Options">  
	            <p:menuitem value="Home" icon="ui-icon-home" /> 
	            <p:menuitem value="Configurar Cuenta" icon="ui-icon-gear" />  
	            <p:menuitem value="Cerrar Sesión" icon="ui-icon-power" />  
	             
	        </p:menuButton>  
	    </p:toolbarGroup>  
	  
	  </p:toolbar>  
	</h:form>  
  </div>
  <!-- fin primera fila -->


  <div class="grid_20 span_bottom omega alpha">
   <p:carousel itemStyleClass="grid_20 carousel" pageLinks="4" autoPlayInterval="10000"   
        rows="1" effect="easeInStrong" circular="true">  
    <p:graphicImage value="/carousel_img/nature1.jpg"/>  
    <p:graphicImage value="/carousel_img/nature2.jpg"/>  
    <p:graphicImage value="/carousel_img/nature3.jpg"/>
    <p:graphicImage value="/carousel_img/nature4.jpg"/>
	</p:carousel>  
  </div>
<!--   <div class="grid_20 span_bottom"> -->
<!-- 	  <p:galleria value="#{galleriaBean.images}"   -->
<!--             var="image" effect="slide" effectSpeed="1000"   -->
<!--             panelWidth="790" panelHeight="250" frameWidth="80" frameHeight="35"   -->
<!--             filmstripPosition="bottom" showCaptions="true" showOverlays="true">   -->
  
<!-- 		    <p:graphicImage value="/carousel_img/#{image}" title="#{image}"/>   -->
<!-- 		    <p:galleriaOverlay title="#{image}">   -->
<!-- 		        Descripcion para  #{image} aqui ! -->
<!-- 		    </p:galleriaOverlay>   -->
		  
<!-- 		</p:galleria>   -->
<!--   </div> -->



  
  
   


  <div class="grid_5 span_bottom alpha">
    <p:panel itemStyleClass="panelAplicacion" id="sports1" header="WEB CLIPPER">  
   		<img src="ciberapps_img/app1.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="5" disabled="true" /> 
    </p:panel>  
  </div>
  <div class="grid_5 span_bottom">
   <p:panel itemStyleClass="panelAplicacion" id="sports2" header="TWEET DECK">  
   		<img src="ciberapps_img/app2.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="4" disabled="true" /> 
    </p:panel> 
  </div>
  <div class="grid_5 span_bottom ">
    <p:panel itemStyleClass="panelAplicacion" id="sports3" header="WEVIDEO" >  
   		<img src="ciberapps_img/app3.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="5" disabled="true" /> 
    </p:panel>  
  </div>
  <div class="grid_5 span_bottom omega">
    <p:panel itemStyleClass="panelAplicacion" id="sports4" header="GRADIENT CREATOR">  
   		<img src="ciberapps_img/app4.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="2" disabled="true" /> 
    </p:panel>  
  </div>
  <!-- fin tercera fila -->
  

  <div class="grid_5 span_bottom alpha">
    <p:panel itemStyleClass="panelAplicacion" id="sports5" header="GUN BROS">  
   		<img src="ciberapps_img/juego1.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="3" disabled="true" /> 
    </p:panel>  
  </div>
  <div class="grid_5 span_bottom">
    <p:panel itemStyleClass="panelAplicacion" id="sports6" header="WORLD GOLF TOUR">  
   		<img src="ciberapps_img/juego2.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="5" disabled="true" /> 
    </p:panel>  
  </div>
  <div class="grid_5 span_bottom">
   <p:panel itemStyleClass="panelAplicacion" id="sports7" header="SLOTO MANIA">  
   		<img src="ciberapps_img/juego3.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="4" disabled="true" /> 
    </p:panel>  
  </div>
  <div class="grid_5 span_bottom omega">
   <p:panel itemStyleClass="panelAplicacion" id="sports8" header="ASSASINS">  
   		<img src="ciberapps_img/juego4.jpg" class="imgApp ui-corner-all"/>
   		<p:rating value="1" disabled="true" /> 
    </p:panel> 
  </div>
  <!-- fin tercera fila -->

  
   <div class="panelAplicacion grid_5 span_bottom alpha" >
    <p:panel itemStyleClass="panelAplicacion" id="sports9" header="WEB CLIPPER">
	    <p:accordionPanel event="mouseover">  
		    <p:tab title="Aplicación" event="mouseover">
			    <img src="ciberapps_img/app1.jpg" class="imgApp ui-corner-all"/>
	   			<p:rating value="4" disabled="true"   /> 
		    </p:tab>  
		    <p:tab title="Vista Rápida" event="mouseover">  
		            <h:panelGrid  columns="1">  
		                  
		                <h:outputText style="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices, felis sit amet semper consequat, tellus neque varius diam, sed tempus diam mi id est. " />  
		  				<p:separator id="separator"/>
		  				<h:panelGrid  columns="2" cellpadding="2"> 
		  					<h:outputText class="titu" value="Autor :" />  
			                <h:outputText value="Monkar System Power!" />  
			  
			                <h:outputText class="titu" value="Precio :" />  
			                <h:outputText class="precio" value="S/. 45.00"/> 
		  				</h:panelGrid>
		               
		            </h:panelGrid>
		    </p:tab>  
		</p:accordionPanel>
   		
    </p:panel>
  </div>
  
   <div class="panelAplicacion grid_5 span_bottom" >
    <p:panel itemStyleClass="panelAplicacion" id="sports10" header="TWEET DECK">
	    <p:accordionPanel event="mouseover">  
		    <p:tab title="Aplicación" event="mouseover">
			    <img src="ciberapps_img/app2.jpg" class="imgApp ui-corner-all"/>
	   			<p:rating value="3" disabled="true"   /> 
		    </p:tab>  
		    <p:tab title="Vista Rápida" event="mouseover">  
		            <h:panelGrid  columns="1">  
		                  
		                <h:outputText style="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices, felis sit amet semper consequat, tellus neque varius diam, sed tempus diam mi id est. " />  
		  				<p:separator id="separator"/>
		  				<h:panelGrid  columns="2" cellpadding="2"> 
		  					<h:outputText class="titu" value="Autor :" />  
			                <h:outputText value="Monkar System Power!" />  
			  
			                <h:outputText class="titu" value="Precio :" />  
			                <h:outputText class="precio" value="S/. 15.00"/> 
		  				</h:panelGrid>
		               
		            </h:panelGrid>
		    </p:tab>  
		</p:accordionPanel>
   		
    </p:panel>
  </div>
  
   <div class="panelAplicacion grid_5 span_bottom" >
    <p:panel itemStyleClass="panelAplicacion" id="sports11" header="WEVIDEO">
	    <p:accordionPanel event="mouseover">  
		    <p:tab title="Aplicación" event="mouseover">
			    <img src="ciberapps_img/app3.jpg" class="imgApp ui-corner-all"/>
	   			<p:rating value="5" disabled="true"   /> 
		    </p:tab>  
		    <p:tab title="Vista Rápida" event="mouseover">  
		            <h:panelGrid  columns="1">  
		                  
		                <h:outputText style="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices, felis sit amet semper consequat, tellus neque varius diam, sed tempus diam mi id est. " />  
		  				<p:separator id="separator"/>
		  				<h:panelGrid  columns="2" cellpadding="2"> 
		  					<h:outputText class="titu" value="Autor :" />  
			                <h:outputText value="Monkar System Power!" />  
			  
			                <h:outputText class="titu" value="Precio :" />  
			                <h:outputText class="precio" value="S/. 30.00"/> 
		  				</h:panelGrid>
		               
		            </h:panelGrid>
		    </p:tab>  
		</p:accordionPanel>
   		
    </p:panel>
  </div>
  <div class="panelAplicacion grid_5 span_bottom omega" >
    <p:panel itemStyleClass="panelAplicacion" id="sports12" header="GRADIENT CREATOR">
	    <p:accordionPanel event="mouseover">  
		    <p:tab title="Aplicación" event="mouseover">
			    <img src="ciberapps_img/app4.jpg" class="imgApp ui-corner-all"/>
	   			<p:rating value="2" disabled="true"   /> 
		    </p:tab>  
		    <p:tab title="Vista Rápida" event="mouseover">  
		            <h:panelGrid  columns="1">  
		                  
		                <h:outputText style="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices, felis sit amet semper consequat, tellus neque varius diam, sed tempus diam mi id est. " />  
		  				<p:separator id="separator"/>
		  				<h:panelGrid  columns="2" cellpadding="2"> 
		  					<h:outputText class="titu" value="Autor :" />  
			                <h:outputText value="Monkar System Power!" />  
			  
			                <h:outputText class="titu" value="Precio :" />  
			                <h:outputText class="precio" value="S/. 20.00"/> 
		  				</h:panelGrid>
		               
		            </h:panelGrid>
		    </p:tab>  
		</p:accordionPanel>
   		
    </p:panel>
  </div>
  
  
   
  
	
</div>



  <div class="grid_24">
    <p class="last">
      Monkar System Apps Store
    </p>
  </div>
  <!-- fin footer -->
  

</div>
</h:body>
</html>